import shortCircuitAnd from '../../examples/files/react/shortCircuitAnd.js'
import ternaryEvaluation from '../../examples/files/react/ternaryEvaluation.js'
import complexRendering from '../../examples/files/react/complexRendering.js'

It's common for a component to return different types of React elements based on its `props`. React is extremely flexible in this regard — you can return entirely different content each time the component function is called. The only requirement is that render function returns a React node - this can be a React Element, a string, null, or an array of any of these.

## Rendering with `&&`

Let's look at one of the most common cases: conditionally rendering a React element based on whether a specific `prop` exists or not.
In this example, we'll render a Card component that takes a `title` prop and optionally a `subtitle` prop. We only want to render a `h2` for the subtitle if it exists.

<Example code={shortCircuitAnd} />

For simple conditional rendering, we take advantage of the short-circuit evaluation of `&&`. If the left-hand side of the `&&` is falsy, the expression evaluates to the left hand side. Otherwise, the expression evaluates to the right-hand side.

In the example, when a `subtitle` prop is not passed in explicitly, the value of the prop is `undefined`, so the `&&` expression evaluates to the left-hand side (`undefined`). When React sees an `undefined` value, it renders nothing. When we do pass a value for the `subtitle` prop, the left-hand side is truthy, so the expression evaluates to the right-hand side — in this case, our `h2` component.

Note that an empty string `""` is falsy, but the expression will still evaluate to a string (not the boolean `false`). If the parent component renders empty string children, this can affect rendering. So you may want to doubly negate the prop (i.e. convert to boolean) with `(!!subtitle && ...)` to get the value `false` (which doesn't render anything).

In this example, we define styles below where they are used in the component `render` functions. This pattern is fairly common. Styles are often secondary to the component logic, so we want our logic to come first in the file.

> This technique works because the `styles` variable declaration is accessible at the beginning of the block it's defined in (the top level), and we assign a value to `styles` before the render functions are ever called.

## Rendering with ternary `?`

Let's look at another common case: rendering a different React element for when a `prop` exists and when it doesn't. We can accomplish this easily with the ternary operator. It's common to render defaults this way.

<Example code={ternaryEvaluation} />

## Rendering with `if/else`

For more complex rendering, we can introduce variables to store our React elements, letting us combine them in different ways.

Let's take a look at an example where the rendering is substantially different based on whether or not the `loading` and `error` props exist.

<Example code={complexRendering} />

Rendering in React is powerful because the logic can be as simple or complex as we need it to be. However, as rendering complexity grows, the code can start to become unmanageable. Consider breaking down complex components into smaller, simpler ones for a more maintainable code base.
